<template>
  <view class="video-container">
    <!-- 首页视频 -->
    <video
      v-if="isShenhe !== 1"
      id="myVideo"
      :src="bigVideoSrc"
      autoplay
      loop
      muted
      :controls="false"
      :show-play-btn="false"
      :enable-play-gesture="false"
      class="video-fist"
      @loadedmetadata="handleVideoReady"
    ></video>

    <!-- 普通视频 -->
    <view class="video-box">
      <view class="box-title">
        <view style="color: #d9d9d9"> — </view>
        <view class="title-text">
          <view style="font-weight: 700; font-size: 34rpx"> 灵感创意 </view>
          <view style="font-size: 28rpx; color: #9c9c9c"> Originality </view>
        </view>
        <view style="color: #d9d9d9"> — </view>
      </view>

      <view class="box-content">
        <view class="video-item" v-for="item in indexVideoList" :key="item.id">
          <view style="position: relative">
            <image
              v-if="isShenhe == 1"
              :src="item.cover"
              mode="scaleToFill"
              style="width: 100%; height: 80vh; object-fit: cover"
            />
            <image
              v-if="isShenhe !== 1"
              :src="item.cover"
              mode="scaleToFill"
              style="width: 100%; height: 80vh; object-fit: cover"
              @click="toDetail(item)"
            />

            <van-icon
              v-if="isShenhe !== 1"
              name="play-circle-o"
              style="
                position: absolute;
                top: 440rpx;
                left: 300rpx;
                font-size: 100rpx;
                color: #fff;
              "
              @click="toDetail(item)"
            />
          </view>

          <view>
            <view>{{ item.name }}</view>
            <view style="color: #999; font-size: 26rpx">
              {{ item.description }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { bigVideo, indexVideo, about } from '@/api/index'

export default {
  data() {
    return {
      // 首页视频地址
      bigVideoSrc: '',

      // 首页普通视频列表
      indexVideoList: [],

      // 分享标题
      shareTitle: '',
      // 分享图片
      shareImg: '',

      // 是否为审核状态
      isShenhe: '',
    }
  },

  onShareAppMessage() {
    return {
      title: this.shareTitle,
      path: '/pages/index/index',
      imageUrl: this.shareImg,
    }
  },

  created() {
    // 获取首页视频
    this.bigVideo()

    // 获取首页普通视频
    this.indexVideo()

    //关于我们
    this.about()
  },

  methods: {
    // 获取首页视频
    async bigVideo() {
      const respBig = await bigVideo()
      this.bigVideoSrc = respBig.data
    },
    // 获取首页普通视频
    async indexVideo() {
      const respIndex = await indexVideo()
      this.indexVideoList = respIndex.data
    },

    //关于我们
    async about() {
      const respOurs = await about()
      this.shareTitle = respOurs.data.share_title
      this.shareImg = respOurs.data.share_img
      this.isShenhe = respOurs.data.shenhe
    },

    handleVideoReady() {
      // iOS 必须用户交互后才能播放，但 muted 的视频可自动播放
      const videoContext = uni.createVideoContext('myVideo', this)
      videoContext.play()
    },

    // 点击跳转详情
    toDetail(item) {
      wx.navigateTo({
        url: `/pages/components/detail?id=${item.id}&cover=${item.cover}&videofile=${item.videofile}&name=${item.name}&description=${item.description}`,
      })
    },
  },
}
</script>

<style scoped>
.video-container {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
}

.video-fist {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.video-box {
  padding: 20rpx;
}

.video-box .box-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20rpx;
  padding: 30rpx 0;
  border-bottom: 1px solid #f0f0f0;
  box-sizing: border-box;
}

.video-box .box-title .title-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.video-box .box-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
  padding: 30rpx 10rpx;
}

.video-box .box-content .video-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
}
</style>
